<template>
  <div class="container">
    <div class="topCon">
      <el-row class="topTitleBox">
        <el-col class="topTitle boxBorder">
          <p class="topProjectName">
            <i class="icon iconfont iconfanhui1" @click="goBack"></i>
            {{ projectName }}
            <span
              :class="[
                'startStatus',
                status == '待处理' ? 'noStatus' : 'yesStatus',
              ]"
              >{{ status }}</span
            >
          </p>
          <div
            v-if="type !== 'bidding'"
            class="clearfix"
            style="padding-left: 30px"
          >
            <p class="fl">
              接口传入项目与系统项目重复，请选择项目单独建档，或与系统项目合并
            </p>
            <el-link
              type="primary"
              class="fl"
              @click="seeMergerRules"
              style="margin-top: 12px; margin-left: 10px"
              >查看合并规则</el-link
            >
          </div>
          <div v-else class="clearfix">
            <p class="fl">
              招标局项目与系统项目重复，请选择项目单独建档，或与系统项目合并
            </p>
          </div>
          <el-button
            class="commonBut saveBtn funComBut searchBut"
            icon="icon iconfont iconchazhao1"
            @click="searchProject"
            v-if="isShowSearch"
            ><span class="opetareText">搜索项目</span></el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="mainCon">
      <div class="handleResult" v-if="isShowHandleResult">
        <span>处理结果：</span
        ><span
          >接口传入项目
          <span class="proStyle">{{ projectName }}</span> 与系统项目
          <span class="proStyle">{{ systemProjectName }}</span> 合并</span
        >
      </div>
      <div class="handleResult" v-if="filingResults">
        <span>处理结果：</span
        ><span
          >接口传入项目 <span class="proStyle">{{ projectName }}</span
          >单独建档</span
        >
      </div>
      <div class="clearfix">
        <div id="label">
          <table class="tableStyle">
            <thead class="theadStyle">
              <th class="headerS"></th>
              <th style="height: 64px"></th>
              <th class="titleS">基本信息</th>
              <th>施工许可证</th>
              <th>项目状态</th>
              <th>所属区域</th>
              <th>所属行业</th>
              <th>投资类别</th>
              <th>工程造价（元）</th>
              <th>开工日期</th>
              <th>建设周期（天）</th>
              <th>工程类型</th>
              <th>详细地址</th>
              <th class="titleS">建设方信息</th>
              <th>单位名称</th>
              <th>统一社会信用代码</th>
              <th>项目负责人</th>
              <th>负责人手机号码</th>
              <th class="titleS">施工方信息</th>
              <th>单位名称</th>
              <th>统一社会信用代码</th>
              <th>项目负责人</th>
              <th>负责人手机号码</th>
            </thead>
            <tbody class="tbodyStyle">
              <tr
                v-for="(item, i) in projectData"
                :key="i"
                :class="{ activeColumn: i == currentId }"
                @click="handSelect(i)"
              >
                <td class="headerS">{{ item.isSystemPro }}</td>
                <td
                  v-if="item.checkResult == '2'"
                  class="clearfix"
                  style="height: 64px; line-height: 32px"
                >
                  <tooltip-over
                    :content="item.projectName"
                    class="tipSty"
                    style="line-height: 14px"
                    refName="`proPut${i}`"
                  ></tooltip-over>
                  <p class="processedSty">【已建档】</p>
                </td>
                <td
                  v-if="item.checkResult == '1'"
                  class="clearfix"
                  style="height: 64px; line-height: 32px"
                >
                  <tooltip-over
                    :content="item.projectName"
                    class="tipSty"
                    style="line-height: 14px"
                    refName="`proMerge${i}`"
                  ></tooltip-over>
                  <p class="processedSty" v-if="item.isThirdProject == '0'">
                    【已合并】
                  </p>
                </td>
                <td style="height: 64px" v-if="item.checkResult == '0'">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.projectName"
                    placement="top"
                  >
                    <p class="fl proNameStyle ellipsisMultiline">
                      <span>{{ item.projectName }}</span>
                    </p>
                  </el-tooltip>
                  <p
                    class="fl proFunc"
                    @click="
                      fileOrMerge(
                        item.isThirdProject,
                        item.id,
                        item.projectName
                      )
                    "
                  >
                    {{
                      item.isThirdProject == '1' || item.isThirdProject == '2'
                        ? '建档'
                        : '合并'
                    }}
                  </p>
                </td>
                <td style="height: 64px" v-if="item.checkResult == ''">
                  <p>{{ item.projectName }}</p>
                </td>
                <td class="titleS"></td>
                <td>{{ item.license }}</td>
                <td>{{ item.prjStatus }}</td>
                <td v-if="item.provinceName || item.cityName">
                  {{ item.provinceName }} - {{ item.cityName }}
                </td>
                <!-- <td v-if="item.areaDetailDesc">{{item.areaDetailDesc}}</td> -->
                <td v-else></td>
                <td>{{ item.industryName }}</td>
                <td>{{ item.investment }}</td>
                <td>{{ item.total }}</td>
                <td>{{ item.startDate }}</td>
                <template v-if="i === 0 && type === 'bidding'">
                  <td>{{ item.timeLimitDescription }}</td>
                </template>
                <template v-else>
                  <td>{{ item.cycle }}</td>
                </template>
                <td>{{ item.typeName }}</td>
                <td>
                  <tooltip-over
                    :content="item.address"
                    class="tipSty"
                    refName="`address${i}`"
                  ></tooltip-over>
                </td>
                <td class="titleS"></td>
                <td>
                  <tooltip-over
                    :content="item.pcName"
                    class="tipSty"
                    refName="`pcName${i}`"
                  ></tooltip-over>
                </td>
                <td>{{ item.pcUscc }}</td>
                <td>{{ item.pcLeader }}</td>
                <td>{{ item.pcLeaderTel }}</td>
                <td class="titleS"></td>
                <td>
                  <tooltip-over
                    :content="item.pbName"
                    class="tipSty"
                    refName="`pbName${i}`"
                  ></tooltip-over>
                </td>
                <td>{{ item.pbUscc }}</td>
                <td>{{ item.leader }}</td>
                <td>{{ item.leaderTel }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 查看合并规则弹框 -->
    <el-dialog
      :visible.sync="noDialogVisible"
      width="600px"
      class="tipDialog"
      title="查看合并规则"
      :close-on-click-modal="false"
      custom-class="brand-dialog-min-width"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div class="reminder">
        <i class="el-icon-warning"></i>
        <span
          >合并项目为不可逆过程，合并后无法回退，请务与项目负责人核实后操作</span
        >
      </div>
      <div class="tip">
        <div style="color: #333; font-weight: bold">
          1. 单独建档：<span style="color: #666"
            >接口传入项目将在系统中直接建档，第三方再次通过接口上传该项目实名制数据时，直接存入系统，无需再次审核</span
          >
        </div>
        <div style="color: #333; font-weight: bold">
          2. 合并项目：<span style="color: #666"
            >将指定系统项目与接口传入项目合并，接口传入该项目的实名制数据时，将保存至系统中对应项目</span
          >
        </div>
        <!-- <div style = "color:red"><i class="icon iconfont iconhuabanfuben" style = "margin-right:5px;"></i>合并项目为不可逆过程，合并后无法回退，请务与项目负责人核实后操作</div> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noDialogVisible = false" class="cancel"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 搜索项目弹框 -->
    <el-dialog
      :visible.sync="searchProDialog"
      :close-on-click-modal="false"
      custom-class="brand-dialog-min-width"
      class="financialVisible"
      :modal-append-to-body="false"
      width="900px"
      :append-to-body="true"
    >
      <div slot="title">
        <p
          style="
            font-weight: 600;
            font-size: 16px;
            line-height: 16px;
            color: #333;
          "
        >
          搜索系统项目
        </p>
        <p style="font-size: 14px; margin-top: 10px; color: #999">
          可通过项目名称搜索系统项目，点击“添加对比”可将项目加入对比列表
        </p>
      </div>
      <div>
        <el-form
          :inline="true"
          class="mrT8"
          :model="filterField"
          ref="searchConditions"
          label-width="72px"
        >
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              height="250"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item style="margin-left: 12px">
            <!-- <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchBrand" class="commonBtn"></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchBrand"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div
        ref="tableBox"
        style="padding: 0; margin: 0"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaName"
            label="区域"
            align="center"
            :formatter="formatTd"
            min-width="120px"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
            min-width="120px"
          ></el-table-column>
          <el-table-column
            prop="pcName"
            label="建设方"
            align="left"
            width="200"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pcName"
                :columnName="'pcName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="pbName"
            label="施工方"
            align="left"
            width="200"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="prjStatus"
            label="状态"
            align="center"
            :formatter="formatTd"
            min-width="120px"
          ></el-table-column>
          <el-table-column
            prop="isSa"
            label="是否开设专户"
            align="center"
            :formatter="formatTd"
            min-width="120px"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isSa == '0'">未开设</span>
              <span v-else>已开设</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="investment"
            label="投资类型"
            align="center"
            :formatter="formatTd"
            min-width="160px"
          ></el-table-column>
          <el-table-column label="操作" width="110" align="left" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click="showVoucher(scope.row)"
                >添加对比</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          style="margin-top: 16px"
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          :pageSizes="pageSizes"
          :pageSize="pageSize"
        ></Pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import tooltipOver from '@/components/publicCom/elToolTip'
export default {
  name: 'projectInterfaceDetail',
  components: {
    tooltipOver,
  },
  data() {
    return {
      projectName: '',
      status: '',
      id: '',
      noDialogVisible: false, //查看合并规则弹框
      searchProDialog: false, //搜索系统项目弹框
      // requestUrl: "api-e/cs/employee/expand/projectemp",
      requestUrl: 'open/check/project/searchlist',
      pageSize: 10,
      pageNo: 1,
      tableList: [],
      pageSizes: [10, 20, 30, 40],
      filterField: {
        displayedProjectIds: [],
        projectName: '', //项目名称
        areaCode: '', //区域
      },
      areaId: '', //区域
      loading: true,
      projectData: [],
      isShowHandleResult: false, //合并处理结果显示
      isShowSearch: false,
      contrastList: '',
      currentId: -1,
      isShowTooltip: true,
      systemProjectName: '', //系统项目名称
      emptyData: {
        address: '',
        applicationId: null,
        areaId: '',
        areaName: null,
        cbUscc: null,
        checkResult: '',
        checkStatus: null,
        cityId: null,
        cityName: '',
        cleanId: null,
        cleanName: null,
        cleanReason: null,
        countyId: null,
        countyName: null,
        createTime: '',
        creatorId: null,
        cycle: '',
        effectiveEndDate: null,
        effectiveStartDate: null,
        endDate: null,
        id: '',
        industryId: null,
        industryName: '',
        investment: '',
        isDeleted: 1,
        isSa: null,
        isThirdProject: '',
        lat: null,
        leader: null,
        leaderTel: null,
        license: null,
        lon: null,
        managerIdcard: null,
        managerName: null,
        managerTel: null,
        pbId: null,
        pbName: '',
        pbUscc: '',
        pcId: null,
        pcLeader: null,
        pcLeaderTel: null,
        pcName: '',
        pcUscc: '',
        prjStatus: '',
        projectCode: null,
        projectName: '暂无相似项目',
        provinceId: null,
        provinceName: '',
        salaryDay: null,
        similarityRatio: '',
        sourceType: null,
        startDate: '',
        startDateStr: null,
        status: null,
        statusDesc: null,
        total: '',
        typeId: null,
        typeName: '',
        updateTime: null,
        updaterId: null,
        filingResults: false,
      },
      // displayedProjectIds:[]
      type: '',
    }
  },
  computed: {
    ...mapState(['areasOptions']),
  },
  created() {
    this.type = this.$route.query.type
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.id = this.$route.query.id
    this.getTitleData()
    this.getProData()
    if (this.type === 'bidding') {
      this.requestUrl = '/api-p/project/tender/base/search'
    }
  },
  methods: {
    ...mapActions(['getAreas']),
    getTitleData() {
      let url = 'open/check/project/detailbyid'
      if (this.type === 'bidding') {
        url = 'api-p/project/tender/base/detailbyid'
      }
      this.axios({
        method: 'post',
        data: { id: this.id },
        url,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectName = response.data.result.projectName
              if (response.data.result.checkStatus == '0') {
                this.status = '待处理'
                this.isShowSearch = true
              } else {
                this.status = '已处理'
                this.isShowSearch = false
                if (response.data.result.checkResult == '1') {
                  // 合并显示处理结果
                  this.isShowHandleResult = true
                  this.systemProjectName =
                    response.data.result.relevantProjectName
                } else if (response.data.result.checkResult == '2') {
                  this.filingResults = true
                }
              }
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 查看合并规则
    seeMergerRules() {
      this.noDialogVisible = true
      //      var html =
      //     "<div style='font-size:16px'>1、单独建档：" + "<span>接口传入项目将在系统中直接建档，第三方再次通过接口上传该项目实名制数据时，直接存入系统，无需再次审核</span>"+ "</div>" +
      //     "<div style='font-size:16px'>1、单独建档：" + "<span>接口传入项目将在系统中直接建档，第三方再次通过接口上传该项目实名制数据时，直接存入系统，无需再次审核</span>"+ "</div>" +
      //     "<div>合并项目为不可逆过程，合并后无法回退，请务与项目负责人核实后操作</div>"
      //    ;

      //     this.$confirm(html, "温馨提示", {
      //         dangerouslyUseHTMLString: true
      //     })
      //     .then(action => {
      //       this.toPaySalary(data);
      //     })
      //     .catch(() => {

      //     });
    },
    searchProject() {
      this.searchProDialog = true
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    },
    searchBrand() {
      this.$refs.pagination.getTableListData()
    },
    getTableList(data) {
      this.tableList = data
      // this.tableList = [{
      //     alertTotal: 44,
      //     archiveDate: "2019-06-04",
      //     areaId: "421301",
      //     areaName: "市本级",
      //     attMonthTotal: 0,
      //     attTotal: 102464,
      //     attYesterdayTotal: 0,
      //     balance: 16.55,
      //     cityId: "4213",
      //     cityName: "随州市",
      //     companyTotal: 1,
      //     countyId: "421301",
      //     countyName: "市本级",
      //     createTime: "2020-06-16",
      //     depositPayTotal: 0,
      //     depositShouldPayTotal: 5158776,
      //     grantAll: 0,
      //     groupTotal: 0,
      //     id: "ff80808172bd59450172bd6e0d68001a",
      //     industryId: "01",
      //     industryName: "住建",
      //     investment: "OTHERS",
      //     investmentDesc: "其他",
      //     isDeleted: 1,
      //     isPs: 0,
      //     isPsDesc: "未设立",
      //     isSa: 1,
      //     isSaDesc: "已开设",
      //     onlineTotal: 0,
      //     pb: true,
      //     pbName: "湖北大随建设有限公司",
      //     pbUscc: "914213000707700196",
      //     pcName: "随州市旅游地产投资有限公司",
      //     pcUscc: "914213210635123967",
      //     peopleTotal: 0,
      //     projectId: "402884856b1d7063016b21141954000a",
      //     projectName: "随州御景天城小区1#商业1#楼2#楼及2#商业3#5#6#7#楼及地下室",
      //     projectStartDate: "2019-02-18",
      //     provinceId: "42",
      //     provinceName: "湖北省",
      //     psMonthTotal: 0,
      //     psTotal: 1433,
      //     realNameTotal: 0,
      //     saMonthTotal: 0,
      //     saTotal: 7130150,
      //     salaryTotalIn: 7242676.55,
      //     salaryTotalOut: 7242660,
      //     signedContractCount: 0,
      //     status: "STARTED",
      //     statusDesc: "已开工",
      //     total: 171959200,
      //     typeId: "01",
      //     typeName: "房屋建筑工程",
      //     updateTime: "2021-01-20",

      // }];
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaCode = areaId
    },
    goBack() {
      if (this.type !== 'bidding') {
        this.$router.push('/home/projectDeduplication/interfaceProject')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/projectDeduplication/interfaceProject',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/dataDocking/biddingProjectList')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/dataDocking/biddingProjectList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // 获取项目数据
    getProData() {
      let url = 'open/check/project/detail'
      if (this.type === 'bidding') {
        url = '/api-p/project/tender/base/detail'
      }
      this.axios({
        method: 'post',
        data: {
          id: this.id,
          areaId: localStorage.getItem('areaId'),
        },
        url,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectData = response.data.result
              console.log(this.projectData)
              for (var i = 0; i < this.projectData.length; i++) {
                this.filterField.displayedProjectIds.push(
                  this.projectData[i].id
                )
              }
              this.filterField.displayedProjectIds = this.packageParams(
                this.filterField.displayedProjectIds
              )
              if (
                this.projectData.length == 1 &&
                this.projectData[0].checkStatus == '0'
              ) {
                this.projectData.push(this.emptyData)
              }
              for (var i = 0; i < this.projectData.length; i++) {
                this.projectData[i].isSystemPro = ''
                this.projectData[0].isSystemPro = '接口传入项目'
                this.projectData[1].isSystemPro = '系统项目'
              }
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    fileOrMerge(data, id, proName) {
      var projectName = this.projectName
      var html =
        '<div>是否确认将接口传入项目 ' +
        "<span style = 'color:#009588'>" +
        proName +
        '</span> 独立建档？</div>'
      var htmlMerge =
        '<div>是否确认将系统项目 ' +
        "<span style = 'color:#009588'>" +
        projectName +
        '</span> 与 ' +
        "<span style = 'color:#009588'>" +
        proName +
        '</span> 合并？合并后接口项目实名制数据将传入合并的系统项目中</div>' +
        "<div><i class='icon iconfont iconhuabanfuben' style = 'color:red;margin-right:5px;'></i><span style = 'color:red;'>合并项目为不可逆过程，请务必与项目负责人核实后操作</span></div>"
      if (data == '1' || data == '2') {
        if (data === '2') {
          this.RecordOrMerge('putOnRecord', id, proName)
          return
        }
        this.$confirm(html, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.RecordOrMerge('putOnRecord', id, proName)
          })
          .catch(() => {})
      } else {
        this.$confirm(htmlMerge, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.RecordOrMerge('merge', id, proName)
          })
          .catch(() => {})
      }
    },
    // 建档合并
    RecordOrMerge(type, mergeId, projectName) {
      var afferentData
      if (type == 'putOnRecord') {
        afferentData = {
          id: this.id,
        }
        if (this.type === 'bidding') {
          this.$router.push({
            path: '/home/monitorProjectManagement/projectDocumentation',
            name: 'projectDocumentation',
            query: {
              id: this.id,
              type: this.type,
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/dataDocking/biddingProjectList',
            newUrl: this.$router.currentRoute.fullPath,
          })
          return
        }
      } else {
        afferentData = {
          id: this.id,
          mergeId: mergeId,
        }
      }
      let url = '/open/check/project/operProject'
      if (this.type === 'bidding') {
        url = '/api-p/project/tender/base/merge'
      }
      this.axios({
        method: 'post',
        data: afferentData,
        url,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (type == 'putOnRecord') {
                this.filingResults = true
              } else {
                this.systemProjectName = projectName
                this.isShowHandleResult = true
              }
              this.isShowSearch = false
              this.$message({
                type: 'success',
                message: response.data.result,
              })
              if (this.type === 'bidding') {
                this.goBack()
                return
              }
              this.getProData()
              this.getTitleData()
              // this.status = "已处理"
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    // 添加对比
    showVoucher(row) {
      if (this.contrastList) {
        this.$confirm(
          '列表中已添加一个对比项目，再次添加会将原项目覆盖',
          '提示',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }
        )
          .then(() => {
            this.contrastList = {}
            this.contrastList = row
            this.projectData.pop()
            this.projectData.push(this.contrastList)
            this.searchProDialog = false
            this.$message({
              type: 'success',
              message: '添加成功',
            })
          })
          .catch(() => {})
      } else {
        this.contrastList = row
        // 没有系统项目会显示暂无相似，如果添加对比，删除此空对象
        if (this.projectData[1].projectName == '暂无相似项目') {
          this.projectData.pop()
        }
        this.projectData.push(this.contrastList)
        this.searchProDialog = false
        this.$message({
          type: 'success',
          message: '添加成功',
        })
      }
    },
    handSelect(i) {
      this.currentId = i
    },
    // 判断列表文字是否溢出显示提示语
    // onMouseOver(i,ref) {
    //     let parentWidth = this.$refs[ref][0].parentNode.offsetWidth;
    //     let contentWidth =this.$refs[ref][0].offsetWidth;
    //     // 判断是否开启tooltip功能
    //     if (contentWidth>parentWidth) {
    //         this.isShowTooltip = false;
    //     } else {
    //         this.isShowTooltip = true;
    //     }
    // }
  },
}
</script>

<style scoped lang="less">
.container {
  .topTitle {
    background: #fff;
    /* border-bottom: 1px solid #e3e7e9; */
    padding: 15px 0px;
    position: relative;
    padding-left: 24px;
    h2 {
      font: bold 18px Microsoft YaHei;
      color: #333333;
      .iconfanhui1 {
        font-size: 20px;
        margin-right: 6px;
        cursor: pointer;
      }
    }
    p {
      font-size: 14px;
      margin-top: 10px;
      color: #666666;
    }
    .searchBut {
      position: absolute;
      top: 24px;
      right: 24px;
    }
  }
  .mainCon {
    padding: 24px;
    height: calc(100% - 67px);
    overflow-y: auto;
    .handleResult {
      padding: 14px 20px;
      background: #f5f7fb;
      margin-bottom: 16px;
      font-size: 16px;
      color: #333333;
      .proStyle {
        color: #009588;
      }
    }
    .tableStyle {
      display: block;
      width: 100%;
    }
    .theadStyle {
      display: block;
      float: left;
      width: 15%;
      th {
        display: block;
        border: 1px solid #dfe6ec;
        padding: 12px 16px;
        border-right: none;
        border-bottom: none;
        height: 40px;
        background: #f5f7fb;
        font-size: 14px;
        color: #333;
        font-weight: 400;
        text-align: left;
        &:last-child {
          border-bottom: 1px solid #dfe6ec;
        }
      }
      .headerS,
      .titleS {
        height: 28px;
        padding: 6px 16px;
        font-size: 14px;
        background: #e4ebf1;
        font-weight: 700;
      }
      .titleS {
        border-left: none;
      }
    }
    .tbodyStyle {
      display: block;
      float: left;
      width: 85%;
      td {
        display: block;
        border: 1px solid #dfe6ec;
        padding: 12px 16px;
        border-right: none;
        border-bottom: none;
        /* text-align: center; */
        height: 40px;
        font-size: 14px;
        color: #333;
        &:last-child {
          border-bottom: 1px solid #dfe6ec;
        }
        .proNameStyle {
          width: 60%;
        }
        .ellipsisMultiline {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .proFunc {
          padding: 5px 7.5%;
          color: #fff;
          background: #009588;
          border-radius: 4px;
          margin-top: 7px;
          margin-left: 3%;
          cursor: pointer;
        }
        a {
          color: #333;
        }
        .processedSty {
          color: #009588;
          line-height: 15px;
          margin-top: 5px;
          margin-left: -5px;
        }
        .tipSty {
          width: 100%;
          border: none !important;
        }
      }
      tr {
        display: block;
        float: left;
        width: 20%;
        &:last-child {
          td {
            border-right: 1px solid #dfe6ec;
          }
        }
        &:hover {
          background: #f5f7fa;
        }
        &.activeColumn {
          background: #ecf5ff;
        }
      }
      .headerS,
      .titleS {
        height: 28px;
        padding: 6px 16px;
        font-size: 14px;
        background: #e4ebf1;
        font-weight: 700;
      }
      .titleS {
        border-left: none;
      }
    }

    /* .headerTableStyle {
            width:84%;
            tbody {
            }
            tr{
                border:1px solid #dfe6ec;
                padding:10px 5px;
                height:40px;
                &:last-child {
                        th{
                            border-bottom:1px solid #dfe6ec;
                        }
                    }
                }
            th{
               border:1px solid #dfe6ec;
                padding:10px 5px;
                border-right:none;
                border-bottom:none;
                height:40px;
                &:last-child {
                    border-right:1px solid #dfe6ec;
                }
            }
            
        } */
    /* .titleStyle {
            padding:8px 20px;
            border-left:1px solid #dfe6ec;
            border-right:1px solid #dfe6ec;
            width:84%;
        } */
  }
  .inlineBlock {
    display: inline-block;
  }

  .topProjectName {
    margin-top: 0 !important;
    // font: bold 18px Microsoft YaHei !important;
    font-size: 18px !important;
    font-weight: bold;
    color: #333 !important;
    line-height: 22px !important;
    .startStatus {
      // padding: 0px 12px;
      color: #fff;
      font-size: 12px;
      margin-left: 10px;
      vertical-align: top;
      display: inline-block;
      margin-top: 1px;
      font-weight: 400;
      /* // margin-top: 4px; */
    }
    .noStatus {
      background: #ffac37;
    }
    .yesStatus {
      background: #009588;
    }
  }
  .tipDialog {
    /deep/ .el-dialog__header {
      border-bottom: none !important;
    }
    /deep/ .el-dialog__body {
      padding: 0 !important;
    }
    /deep/ .el-dialog__footer {
      background: #fff;
      text-align: center;
    }
  }

  /deep/ .el-tooltip:focus {
    outline: none !important;
  }
}
.tip {
  padding: 16px 20px;
  div {
    line-height: 2;
  }
}
.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 20px;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
  span {
    color: #ff4d4a;
  }
}
.tipDialog /deep/ .el-dialog__body {
  padding: 0;
}
/deep/ .el-dialog__body {
  padding-bottom: 0 !important;
}
@import '../../../static/css/filterArea.less';
/* /deep/ .el-dialog__body{
      padding:30px 0px;
} */
</style>
